import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
// 导入路由
import { Route } from "react-router-dom";
import Index from '../Index'
import News from '../News'
import Rent from '../Rent'
import Profile from '../Profile'

import './index.css';

const navs = [
  { title: '首页', icon: 'icon-ind', path: '/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/rent' },
  { title: '质询', icon: 'icon-infom', path: '/home/news' },
  { title: '我的', icon: 'icon-my', path: '/home/profile' },
];
export default class Home extends Component {
    constructor(props) {
    super(props);
    this.state = {
       hidden: false,
      };
    }
  renderTabBarItem() {
  const { location: { pathname } } = this.props;
    return navs.map(item => {
        return (
            <TabBar.Item
                title={item.title}
                key={item.title}
                icon={<i className={`iconfont ${item.icon}`}></i>}
                selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
                selected={pathname === item.path}
                onPress={() => {
                    this.setState({
                        selectedTab: item.path,
                    });
                    this.props.history.push(item.path)
                }}
            >
            </TabBar.Item>
        )
    })
}
  render() {
        return (
            <div className="home">
            <Route exact path="/home" component={ Index } />
            <Route path="/home/news" component={ News } />
            <Route path="/home/rent" component={ Rent } />
            <Route path="/home/profile" component={ Profile } />
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          barTintColor="white"
          noRenderContent>
              {/* 调用方法 */}
          {this.renderTabBarItem()}
        </TabBar>
        </div>
        )
    }
}
